<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NarbarTest</title>
    <link href="../../static/css/common/bootstrap.css"  rel="stylesheet">
    <link href="../../static/css/common/cmxform.css"  rel="stylesheet">
    <link href="../../static/css/common/screen.css"  rel="stylesheet">
    <link href="../../static/css/common/default/easyui.css"  rel="stylesheet">
    <link href="../../static/css/common/icon.css"  rel="stylesheet">
    <link href="../../static/css/common/bootstrap-sortable.css"  rel="stylesheet">
    <link href="../../static/css/common/jquery-ui.css"  rel="stylesheet">
    <link href="../../static/css/common/jquery-ui.min.css"  rel="stylesheet">
    <link href="../../static/css/common/jquery-ui.structure.css"  rel="stylesheet">
    <link href="../../static/css/common/jquery-ui.theme.css"  rel="stylesheet">
    <link href="../../static/css/common/jquery-ui.theme.min.css"  rel="stylesheet">
    <link href="../../static/css/common/echart/codemirror.css" rel="stylesheet">
    <link href="../../static/css/common/echart/monokai.css" rel="stylesheet">
     <link href="../../static/css/common/echart/bootstrap-theme.css"  rel="stylesheet">
    <link href="../../static/css/common/echart/carousel.css"  rel="stylesheet">
    <link href="../../static/css/common/echart/echartsHome.css" rel="stylesheet">

    <!--<link href="../../static/css/echart/jquery-ui.structure.css"  rel="stylesheet">-->
    <!--<link href="../../static/css/echart/jquery-ui.theme.css"  rel="stylesheet">-->
    <!--<link href="../../static/css/echart/jquery-ui.theme.min.css"  rel="stylesheet">-->
    <!--<script src="echarts.min.js"></script>-->
    <script src="../../static/js/echarts.min.js"></script>
</head>
<body>



    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="#">caoyuanTools</a>

                <div class="nav-collapse">
                    <ul class="nav">
                        <li id="select"><a href="#">task1</a></li>
                        <li id="qa"><a href="#">task2</a></li>
                        <li id="about"><a href="#">task3</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
    </div>

    <div class="container" id="testdiv" >
        <div class="row" id="testchart" style="width: 600px;height:400px;"></div>

    </div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('testchart'),'macarons');

        // 指定图表的配置项和数据
        option = {
                    title : {
                        text: '未来一周气温变化',
                        subtext: '纯属虚构'
                    },
                    tooltip : {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['最高气温','最低气温']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : ['周一','周二','周三','周四','周五','周六','周日']
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value',
                            axisLabel : {
                                formatter: '{value} °C'
                            }
                        }
                    ],
                    series : [
                        {
                            name:'最高气温',
                            type:'line',
                            data:[11, 11, 15, 13, 12, 13, 10],
                            markPoint : {
                                data : [
                                    {type : 'max', name: '最大值'},
                                    {type : 'min', name: '最小值'}
                                ]
                            },
                            markLine : {
                                data : [
                                    {type : 'average', name: '平均值'}
                                ]
                            }
                        },
                        {
                            name:'最低气温',
                            type:'line',
                            data:[1, -2, 2, 5, 3, 2, 0],
                            markPoint : {
                                data : [
                                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                                ]
                            },
                            markLine : {
                                data : [
                                    {type : 'average', name : '平均值'}
                                ]
                            }
                        }
                    ]
                };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    </script>



</body>
</html>